The HTML (Hyper Text Markup Language) 5 specification defines a 2D Canvas tag and corresponding Canvas API (Application Programming Interface). When a CPU (Central Processing Unit) is executing a computer program that uses an HTML5 Canvas application, the Canvas tag may be added to a webpage by calling Canvas API to draw 2D graphics. The Canvas tag is only a graphic container used to define graphics including charts and other images. Specific graphic drawings must be completed using scripts, for example, through codes of a graphic drawing application, e.g. JavaScript codes, which is not limited herein.
Specifically, when a CPU is executing a program that uses an HTML5 Canvas application to draw 2D graphics, it executes JavaScript codes to draw the graphics. If a thread in the graphic drawing process needs to call Canvas API to generate images in real time on the web page, then when the CPU calls a canvas drawing command, it immediately performs rendering corresponding to the canvas drawing command by calling GPU (Graphic Processing Unit). When all drawing commands have been called for a frame of canvas, the rendering of the frame of canvas can be completed. When the rendering is completed, the thread continues to execute JavaScript codes to draw the next frame of canvas.
As JavaScript codes and rendering are executed in the same thread, however, the required time is the sum of those for executing the JavaScript codes and rendering. Since rendering of graphics is very time-consuming, it takes a long period of time to complete rendering of each frame of canvas, such that the CPU takes a long time to execute the thread, which lowers the response speed of the HTML5 Canvas application.